<template>
  <view class="container">
    <view class="content">
      <view class="header_txt">
        <view class="back"
              @click="backHandler">
          <image src="/static/img/back3.png"></image>
        </view>
        <view class="title"> 经验技巧详情 </view>
      </view>
      <view class="list_box">
        <view class="list_item"
              v-for="(item,index) in ClassList"
              :key="index"
              @click="goList(item.id)">
          <view class="list_item_l">
            <view class="list_item_l_title">{{item.title}}</view>
            <view class="list_item_ms">{{item.classname}}</view>
          </view>
          <view class="list_item_r">
            <image :src="item.image"
                   mode=""></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ClassList: {
        0: {
          id: 1,
          title: '考试',
          classname: '全真模拟',
          image: '../../static/image/tmlx_img_qzmo@2x.png'
        },
        1: {
          id: 2,
          title: '考试',
          classname: '考前预测',
          image: '../../static/image/tmlx_img_kqyc@2x.png'
        },
        2: {
          id: 3,
          title: '刷题',
          classname: '综合能力',
          image: '../../static/image/tmlx_img_zhnl@2x.png'
        },
        3: {
          id: 4,
          title: '刷题',
          classname: '专业知识',
          image: '../../static/image/tmlx_img_zyzs@2x.png'
        },
        4: {
          id: 5,
          title: '刷题',
          classname: '英语能力',
          image: '../../static/image/tmlx_img_yynl@2x.png'
        },
        5: {
          id: 6,
          title: '刷题',
          classname: 'IT类知识',
          image: '../../static/image/tmlx_img_itzs@2x.png'
        },
        6: {
          id: 7,
          title: '刷题',
          classname: '每月时政',
          image: '../../static/image/tmlx_img_mesz@2x.png'
        },
        7: {
          id: 8,
          title: '测试',
          classname: '认知能力& 性格测试',
          image: '../../static/image/tmlx_img_rznl@2x.png'
        },
        8: {
          id: 9,
          title: '刷题',
          classname: '历年真题',
          image: '../../static/image/addimg.png'
        }
      },
      classid: ''
    }
  },
  onLoad(option) {
    this.classid = option.classid
  },
  methods: {
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    },
    goList(id) {
      uni.navigateTo({
        url: 'testList?typeid=' + id + '&classid=' + this.classid
      })
    }
  }
}
</script>

<style lang="scss">
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .right {
    position: absolute;
    top: 14rpx;
    right: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    width: 750rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  border-top: 1rpx solid #f5f5f5;
}
.list_box {
  width: 100%;
  height: auto;
  margin-top: 40rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.list_item {
  width: 334rpx;
  height: 180rpx;
  border: 1rpx solid #cccccc;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
}

.list_item_l_title {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.list_item_ms {
  width: 120rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 15rpx;
}
.list_item_r image {
  width: 134rpx;
  height: 134rpx;
}
</style>
